<template>
  <div class="singlePushPerson">
    <div class="gp-top">
      <div class="top-title">
        <div class="t-flag"></div>
        <div class="t-text">查询</div>
      </div>
      <div class="top-search">
        <div class="s-box">
          <div class="b-account">
            <span class="a-title">项目:</span>
            <el-select v-model="selectProject" placeholder="请选择" @change="handleChange">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.project_name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-button class="a-search" @click="handleSearch()">搜索</el-button>
            <el-button class="a-export" @click="hanldeExport()">导出</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="single-content">
      <div class="show-box" v-if="personPushList.length!==0">
        <div class="bottom-title">
          <div class="t-flag"></div>
          <div class="t-text">{{personPushList.username}}&nbsp;旗下直推会员{{personPushList.count_member}}人</div>
          <div class="money">总金额:{{personPushList.total_money}}</div>
        </div>
        <div class="current-title">当前选择的项目:<span style="color: #2A4BF0;">{{currentSelectPro}}</span></div>
        <div class="bottom-content-push">
          <div class="content-box" v-for="(item,index) in personPushList.list" :key="index" @click="handleQueryPerson(item.mobile)">
            <div class="box">
              <div class="item-name">{{item.username}}:&nbsp;{{item.mobile}}</div>
              <div class="item-all">投资总额:&nbsp;{{item.money}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="no-data" v-if="!this.personPushList">
        暂无数据
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "SinglePushPerson",
    data(){
      return{
        personPushList:'',
        options:[
          {
            id:'',
            project_name:''
          }
        ],
        selectProject:'',
        currentSelectPro:"尚未选择"
      }
    },
    mounted() {
      this.getPushPersonList()
      this.hanldeGetProList()
    },
    methods:{
      //筛选
      handleChange(item){
        console.log(item)
        this.options.forEach((pro)=>{
          if(item===pro.id){
            this.currentSelectPro=pro.project_name
          }
        })
      },
      //获取项目列表
      hanldeGetProList(){
        this.$api.ProjectList().then((res)=>{
          if(res.data.length!==0){
            this.options=res.data
          }
        },(err)=>{
          this.$message.error(err.msg)
        })
      },
      //获取直推列表
      getPushPersonList(){
        const loading =this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        let data={
          member_id:this.$route.query.memberId
        }
        this.$api.GroupDirectPush(data).then((res)=>{
          if(res.data && res.data.length!==0){
            this.personPushList=res.data
          }
          loading.close()
        },(err)=>{
          this.$message.error(err.msg)
        })
        setTimeout(()=>{
          loading.close()
        },10000)
      },
      handleSearch(){
        const loading=this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        let data={
          member_id:this.$route.query.memberId,
          project_id:this.selectProject+''
        }
        this.$api.GroupDirectPush(data).then((res)=>{
          if(res.data && res.data.length!==0){
            this.personPushList=res.data
          }
          loading.close()
        },(err)=>{
          this.$message.error(err.msg)
        })
        setTimeout(()=>{
          loading.close()
        },10000)
      },
      handleQueryPerson(mobile){
        this.$router.push({path:'/menus/single-queryPerson',query:{account:mobile}})
      },
      hanldeExport(){
        let url=process.env.API_HOST+"/index.php/dataofuser/getZtMember?member_id="+this.$route.query.memberId+"&project_id="+this.selectProject+''+"&to_excel=1"
        const a=document.createElement("a")
        a.setAttribute("download","");
        a.setAttribute("href",url)
        a.click()
      }
    }
  }
</script>

<style scoped lang="less">
  .singlePushPerson{
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    overflow: auto;
    .gp-top{
      width: 100%;
      background-color: #ffffff;
      .top-title{
        height: 50px;
        display: flex;
        align-items: center;
        padding-left: 30px;
        box-sizing: border-box;
        border-bottom: solid 1px #EEEEEE;
        .t-flag{
          width: 3px;
          height: 15px;
          background-color: #2A4BF0;
        }
        .t-text{
          padding-left: 10px;
          font-size: 16px;
          color: #323232;
        }
      }
      .top-search{
        box-sizing: border-box;
        padding: 20px 40px 20px 40px;
        .s-box{
          width: 100%;
          background-color: #F8F8F8;
          .b-account{
            text-align: left;
            position: relative;
            padding: 7px 10px;
            border-radius: 5px;
            box-sizing: border-box;
            .a-title{
              font-size: 14px;
              color: #323232;
            }
            input{
              width: 200px;
              height: 30px;
              font-size: 14px;
              padding: 5px 10px;
              box-sizing: border-box;
              border: solid 1px #DFE2E7;
              border-radius: 3px;
            }
            .a-search{
              margin-left: 20px;
              width: 80px;
              height: 30px;
              padding: 0;
              line-height: 30px;
            }
            .a-export{
              position: absolute;
              right: 20px;
              width: 80px;
              height: 30px;
              padding: 0;
              line-height: 30px;
            }
          }
        }
      }
    }
    .single-content{
      /*height: 100%;*/
      margin-top: 10px;
      background-color: #ffffff;
      .show-box{
        .bottom-title{
          height: 50px;
          display: flex;
          align-items: center;
          padding-left: 30px;
          box-sizing: border-box;
          position: relative;
          .t-flag{
            width: 3px;
            height: 15px;
            background-color: #2A4BF0;
          }
          .t-text{
            padding-left: 10px;
            font-size: 16px;
            color: #323232;
          }
          .money{
            text-align: right;
            font-weight: bold;
            font-size: 15px;
            color: #EA2910;
            /*padding-right: 50px;*/
            position: absolute;
            right: 50px;
          }
        }
        .title{
          text-align: left;
          padding-left: 43px;
        }
        .current-title{
          text-align: left;
          padding-left: 43px;
        }
        .bottom-content-push{
          padding: 20px 40px 40px 30px;
          display: flex;
          flex-wrap: wrap;
          .content-box{
            cursor: pointer;
            width: 170px;
            height: 100px;
            position: relative;
            background-color: #95A1FD;
            border-radius: 5px;
            margin: 10px 20px;
            color:#ffffff;
            padding: 10px 10px;
            box-sizing: border-box;
            overflow: hidden;
            .box{
              position: absolute;
              top: 10px;
              left: 20px;
              bottom: 10px;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              z-index: 10;
              .item-name{
                text-align: left;
                font-size: 14px;
              }
              .item-money{
                text-align: left;
                font-size: 14px;
              }
              .item-all{
                text-align: left;
                font-size: 14px;
              }
            }

          }
          .content-box::after{
            content: '';
            width: 100px;
            height: 100px;
            position: absolute;
            left: 100%;
            bottom: 100%;
            transform: translate(-50%,50%);
            border-radius: 50px;
            background-color: #F9B420;
            z-index: 1;
          }
        }
      }
      .no-data{
        width: 100%;
        background-color:#F2F7F9 ;
        font-size: 20px;
        color: gray;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);

      }
    }
  }
</style>
